<template>
  <div class="">
    <button v-if="$store.state.lock == false" @click="$store.state.lock = true">
      锁定
    </button>
    <button v-else @click="unlock">{{ num == 0 ? "" : num }}秒解锁</button>
    用户名：<input
      type="text"
      v-model="$store.state.name"
      :disabled="$store.state.lock"
    />
    年龄：<input
      type="text"
      v-model="$store.state.age"
      :disabled="$store.state.lock"
    />
    城市：<select
      name=""
      id=""
      v-model="$store.state.city"
      :disabled="$store.state.lock"
    >
      <option value="鹤壁">鹤壁</option>
      <option value="安阳">安阳</option>
      <option value="濮阳">濮阳</option>
      <option value="许昌">许昌</option>
      <option value="平顶山">平顶山</option>
      <option value="新乡">新乡</option>
      <option value="曹县">曹县</option>
    </select>

    <button @click="add">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //   name: "",
      //   age: "",
      //   city: "",
      num: 3,
    };
  },
  mounted() {},
  methods: {
    // add() {
    //   this.$store.commit("add");
    // },

    add() {
      if (this.$store.state.flag == true) {
        this.$store.commit("update");
        //修改数据
      } else {
        this.$store.commit("add");
      }
    },
    unlock() {
      let timer = setInterval(() => {
        this.num--;
        if (this.num <= 0) {
          this.$store.state.lock = false;
          clearInterval(timer);
        }
      }, 1000);
    },
  },
  components: {},
};
</script>

<style lang="scss"></style>
